<template>
	<view class="empty-image y-flex y-align-center y-justify-center" :style="[rootStyle]">
		<text :style="{color: textColor, 'font-size': _pixelunit(size)}">暂 无</text>
		<text class="mt-5" :style="{color: textColor, 'font-size': _pixelunit(size)}">图 片</text>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import SkinColor from '@/assets/skin/index.js'
	export default {
		props: {
			size: {
				type: [String,Number],
				default: 30
			},
			color: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			},
			//圆角大小
			borderRadius: {
				type: [Number,String],
				default: 0
			},
			borderTopLeftRadius: {
				type: [Number,String],
				default: 0
			},
			borderTopRightRadius: {
				type: [Number,String],
				default: 0
			},
			borderBottomRightRadius: {
				type: [Number,String],
				default: 0
			},
			borderBottomLeftRadius: {
				type: [Number,String],
				default: 0
			}
		},
		computed: {
			skinMode () {
				return this.$store.getters['setting/GET_SKIN_MODE']
			},
			skinColor () {
				return SkinColor[this.skinMode]
			},
			textColor () {
				return this.color || this.skinColor.color_1
			},
			borderRadiusStyle () {
				return this.borderRadius > 0 ? {
					borderRadius: this._pixelunit(this.borderRadius),
				} : {
					borderTopLeftRadius: this._pixelunit(this.borderTopLeftRadius),
					borderTopRightRadius: this._pixelunit(this.borderTopRightRadius),
					borderBottomRightRadius: this._pixelunit(this.borderBottomRightRadius),
					borderBottomLeftRadius: this._pixelunit(this.borderBottomLeftRadius),
				}
			},
			rootStyle () {
				return Object.assign({}, this.borderRadiusStyle, {
					'background-color': this.bgColor || this.skinColor.color_gap_1
				}) 
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			}
		}
	}
</script>

<style>
</style>